<template>
<div>
   <home-header ></home-header>
   <home-swiper :list="swiperList"></home-swiper>
   <home-icons :list="iconList"></home-icons>
   <home-recommend :list="recommendList"></home-recommend>
   <home-weekend :list="weekendList"></home-weekend>
</div>
</template>
<script>
import HomeHeader from "./component/Header.vue";
import HomeSwiper from "./component/swiper.vue";
import HomeIcons from "./component/Icons.vue";
import HomeRecommend from "./component/Recommend.vue";
import HomeWeekend from "./component/Weekend.vue";
import axios from 'axios'
import {mapState} from 'vuex'
export default {
  name: "Home",
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  data(){
    return{
      lastCity:'',
     swiperList:[],
     iconList:[],
     recommendList:[],
     weekendList:[]
    }
  },
  computed:{
  ...mapState(['city'])
  },
  methods:{
    getHomeInfo(){
     
      // this.$get(
      //   "api/home",
      //   { 
      //     city:'北京'
          
      //     }
        
      //   )
       axios.get('/api/index.json?city='+this.city)
      .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc(res){
      console.log(this.city)
      res=res.data;
      if(res.ret && res.data)
      { const data=res.data;
        this.swiperList=data.swiperList;
        this.iconList=data.iconList;
        this.recommendList=data.recommendList;
        this.weekendList=data.weekendList;
      }
    }
  },
  mounted(){
    this.lastCity=this.city//第一次的城市保存
   this.getHomeInfo();
  },
  activated () {//当用keep-alive时，组件里会多出这个生命周期函数，页面重新被显示时会执行
    if(this.lastCity !== this.city ){//当这次的城市与上一次的城市不相等时，再次发送请求
    this.lastCity=this.city
     this.getHomeInfo();
    }
  }

};
</script>
